<template>
	<header class="header">
		<h1>todos</h1>
		<input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll">
		<label for="toggle-all"></label>
		<input class="new-todo" placeholder="输入任务名称-回车确认" autofocus @keyup.enter="addFn" v-model="content" />
	</header>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
	data() {
		return {
			content: ''
		}
	},
	computed: {
		...mapState('todos', ['list']),
		isAll: {
			get() {
				return this.list.every(item => item.isDone)
			},
			set(val) {
				this.changeIsAll(val)
			}
		}
	},
	methods: {
		...mapMutations('todos', ['add', 'changeIsAll']),
		addFn() {
			if (this.content.length === 0) {
				return alert('请输入内容')
			}
			this.add(this.content)
			this.content = ''
		}
	}

}
</script>
